<template>
  <div class="content">
    <h2 class="bt">食谱分类</h2>
    <div class="mlr1">
      <hr class="hr1" />
      <ul>
        <div @click="$router.push(`/tongyong?type=${p.leixing}`)"  v-for="p in data" :key="p.fenlei_id">
          <li>{{p.leixing}}<span>(9996)</span></li>
        </div>
      </ul>
      <hr class="hr2" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    }
  },
  mounted(){
    this.BiaoTi();
  },
  methods:{
    BiaoTi() {
      let url = "http://127.0.0.1:3000/v1/Shipufenlei/leixing";
      this.axios.get(url).then((res) => {
        console.log("标题", res);
        this.data = res.data.data;
      });
    },
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.content {
  padding-top: 6px;
  padding-bottom: 12px;
}
.bt {
  height: 47px;
  line-height: 47px;
  color: #817c74;
  font-size: 18px;
  font-weight: 300;
  text-align: center;
}
.hr1 {
  height: 1px;
  border: 0;
  border-top: 1px solid #eae6e3;
  line-height: 0;
  font-size: 0;
}
.hr2 {
  height: 1px;
  border: 0;
  border-top: 1px solid #eae6e3;
  line-height: 0;
  font-size: 0;
  margin-top: 12px;
}
.mlr1 {
  margin-left: 10px;
  margin-right: 10px;
}
.mlr1 ul {
  font-size: 14px;
  list-style: none;
  color: #000;
}
.mlr1 ul div {
  text-decoration: none;
  cursor: pointer;
  color: #333;
  display: inline-block;
}
.mlr1 ul div li {
  padding: 0 20px;
  text-align: left;
  display: inline-block;
  margin-right: 6px;
  margin-top: 10px;
  min-width: 85px;
  height: 36px;
  line-height: 36px;
  background-color: #fff;
  border: 1px solid #eae6e3;
}
.mlr1 ul div li span {
  float: right;
  font-size: 12px;
  color: #a9a39b;
}
</style>